<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        select{width:200px;height:40px;background: red;}
        select option{background: green;}

        .select{width:200px;height:40px;line-height:40px;text-indent: 4px;margin: 0 auto;}
        .select .display{border: solid 1px black;display: block;}
        .select .options{margin: 0;padding:0;list-style: none;border:solid 1px black;border-top:none;display:none;}
        .select .options li.active{background: blue; color: #fff;}
        .select .options em{float: right;margin-right:10px;}
    </style>
</head>
<body>
    <select>
        <option>北京</option>
        <option>上海</option>
        <option selected>重庆</option>
        <option>天津</option>
    </select>

    <br>
    <br>
    <br>

    <div class="select">
        <span class="display">北京</span>
        <ul class="options">
            <li><span>北京</span></li>
            <li><span>上海</span></li>
            <li><span>重庆</span></li>
            <li><span>天津</span></li>
        </ul>
    </div>
</body>
<script>
    
    // 1. 下拉菜单的显示隐藏
        // 点击显示区域显示或隐藏
            // 利用状态区分显示或隐藏
            // 阻止事件冒泡
        // 点击空白隐藏
            // 同步显示或隐藏的状态
    
    // 2. 设置默认选中项的索引
        // 根据索引设置默认选中项
    
    // 3. 鼠标进入和离开和点击
        // 进入时添加高亮样式
        // 离开时隐藏高亮样式
        // 点击时修改显示区域文字，修改索引，设置选中项

    const display = document.querySelector(".select span");
    const options = document.querySelector(".select .options");
    const item = options.children;

    const em = document.createElement("em");
    em.innerHTML = "√";

    let index = 0;
    item[index].appendChild(em);
    display.innerHTML = item[index].querySelector("span").innerHTML;
    
    let onoff = 0;

    display.onclick = function(eve){
        const e = eve || window.event;
        e.stopPropagation();
        if(onoff === 0){
            options.style.display = "block";
            onoff = 1;
        }else{
            options.style.display = "none";
            onoff = 0;
        }
    }
    
    document.onclick = function(){
        options.style.display = "none";
        onoff = 0;
    }

    for(let i=0;i<item.length;i++){
        item[i].index = i;
        item[i].onmouseover = function(){
            this.className = "active";
        }
        item[i].onmouseout = function(){
            this.className = "";
        }
        item[i].onclick = function(){
            display.innerHTML = this.querySelector("span").innerHTML;

            item[index].querySelector("em").remove();

            index = this.index;

            this.appendChild(em);
        }
    }

</script>
</html>